<template>
  <div>
    <n-input ref="inputRef" v-model:value="curValue" style="width: 350px;font-size: 25px"
             round clearable :placeholder="props.placeholder"
            size="large" @keyup.enter.native="search"
             @clear="clickClear" :loading="loading">
      <template #prefix>
        <Icon icon="material-symbols:search" width="30"></Icon>
      </template>
    </n-input>
  </div>
</template>

<script setup lang="ts">
import {Icon} from "@iconify/vue";
import {computed, ref} from "vue";

const props = defineProps({
  value:{
    type:String,
    default:'',
  },
  loading:{
    type:Boolean,
    default:false
  },
  placeholder:{
    type:String,
    default:''
  }
})

const emits = defineEmits(['update:value', 'onChange'])
const inputRef = ref()


const search =()=>{
  emits('onChange')
}
const clickClear =()=>{
  curValue.value=''
  emits('onChange')
}
const curValue = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:value', val)
  }
})
</script>

<style scoped>

</style>